/**
 * 弹窗展示留资数据
 * 2025-07-12 15:12:27 tzj
 * */
import {Modal, Table} from "antd";
import React from "react";
import {lzApi} from "../../services/basic";
import {ButtonExport} from "../BaseComponent/forms";
import Dictionary from "../../services/dictionary";

const defColumns = [
    {title: '联系方式', dataIndex: 'lxfs'},
    {title: '车型', dataIndex: 'cx'},
    {title: '区域', dataIndex: 'qy'},
    {title: '意向项目', dataIndex: 'yxxmmc'},
    // 标识：lxrmc，名称：kfxm
    {title: '微信客服', dataIndex: 'kfxm'},
    // 标识：lxrmc，名称：cjrxm
    {title: '创建人', dataIndex: 'cjrxm'},
    {
        title: '跟进状态', dataIndex: 'gjztmc',
        // filters: Dictionary.followState,
        onFilter: (value, record) => Number(record.gjzt) === Number(value)
    },
    {title: '导购', dataIndex: 'dgmc'},
    {title: '公司名称', dataIndex: 'yymc'},
    {title: '留资日期', dataIndex: 'lzrq'},
    {title: '创建时间', dataIndex: 'cjsj'},
    {
        title: '响应时间', dataIndex: 'gjsj', render(text, record) {
            const colors = Dictionary.responseColors;
            const i = Number(record["xyzt"])
            return <span style={{color: colors[i]}}>{text}</span>
        },
        excelRender: text => text,
        excelFont: (_, record) => {
            const str = Dictionary.responseColors[Number(record["xyzt"])];
            const argb = str.startsWith("#") ? str.slice(1) : str;
            return {
                bold: true,
                // size: 18,
                color: {
                    argb
                }
            }
        }
    },
    {title: '来源账号', dataIndex: 'hzxm'},
];

class LzModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        }
    }

    getDataList(formData) {
        this.setState({
            loading: true,
            dataList: [],
        })
        this.state.queryApi({
            formData,
            pagination: null,
        }).then(res => {
            if (res.code !== "1") {
                console.error(res.msg)
                return;
            }
            this.setState({
                data: res.data,
                dataList: res.data.records
            })
        }).finally(() => {
            this.setState({
                loading: false,
            })
        })
    }

    queryDataList = () => {
        return new Promise(resolve => {
            resolve(this.state.dataList)
        });
    }

    open(data, {queryApi, tableTitle, columns = defColumns, width}) {
        const cb = (cols) => {
            this.setState({
                dataList: [],
                loading: true,
                visible: true,
                queryApi: queryApi || lzApi.getPage,
                tableTitle: tableTitle || "留资详情",
                columns: cols,
                // columns: columns || defColumns,
                width: width || 1400
            }, () => {
                const params = {
                    ...data,
                    ztbz: 1,
                    size: 10000,
                }
                // params.zzrq = params.jsrq;
                // delete params.jsrq;
                this.getDataList(params);
            })
        }
        const index = columns.findIndex(item => item.dataIndex === "gjztmc");

        if (index < 0) {
            cb(columns);
        } else {
            Dictionary.getFollowState().then(followStates => {
                if (index >= 0) columns[index]["filters"] = followStates;
                cb(columns);
            })
        }


        // todo 设置标题，隐藏column
    }

    handleOk = () => {
        this.setState({
            visible: true
        })
    }

    handleCancel = () => {
        this.setState({
            visible: false
        })
    }

    render() {
        const {width, columns, tableTitle} = this.state;
        const that = this;
        const TitleDom = function () {
            return (
                <div style={{display: "flex"}}>
                    <span style={{lineHeight: "initial", marginRight: "20px"}}>{tableTitle}</span>
                    <ButtonExport filename={tableTitle}
                                  columns={columns}
                        // getDateRange={this.getDateRange}
                                  queryDataList={that.queryDataList}
                    />
                </div>
            )
        }
        return (
            <Modal
                title={<TitleDom></TitleDom>}
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width={width}
                footer={null}
            >
                <Table
                    rowKey={item => item.id}
                    columns={columns}
                    dataSource={this.state.dataList}
                    size="middle"
                    loading={this.state.loading}
                    pagination={{
                        defaultPageSize: 10,
                        // 切换每页显示条数
                        pageSizeOptions: [7, 10, 20, 50, 100],
                        showSizeChanger: true,
                        showTotal: (total, range) => `共计 ${total} 条数据`,
                    }}
                />
            </Modal>

        )

    }
}

export default LzModal;